<template>
  <div class="tags-nav">
    <!--右侧综合按钮-->
    <div class="close-con">
      <Dropdown transfer @on-click="handleCloseTags">
        <a href="javascript:void(0)">
          <Button size="small" icon="ios-arrow-down"></Button>
        </a>
        <template #list>
          <DropdownMenu>
            <DropdownItem name="close-left">
              <Icon type="md-arrow-back"/>
              关闭左侧
            </DropdownItem>
            <DropdownItem name="close-right">
              <Icon type="md-arrow-forward"/>
              关闭右侧
            </DropdownItem>
            <DropdownItem name="close-others">
              <Icon type="md-close"/>
              关闭其它
            </DropdownItem>
            <DropdownItem name="close-all">
              <Icon type="md-close-circle"/>
              关闭所有
            </DropdownItem>
          </DropdownMenu>
        </template>
      </Dropdown>
    </div>
    <!--左侧箭头按钮-->
    <div class="btn-con left-btn">
      <Button size="small" icon="ios-arrow-back" @click=" handleScroll(240)"></Button>
    </div>
    <!--右侧箭头按钮-->
    <div class="btn-con right-btn">
      <Button size="small" icon="ios-arrow-forward" @click="handleScroll(-240)"></Button>
    </div>
    <!--中间tag部分-->
    <div class="scroll-outer" ref="scrollOuter" @mousewheel="handlescroll" @DOMMouseScroll="handlescroll">
      <div class="scroll-body" ref="scrollBody" :style="{left:state.tagBodyLeft+'px'}">
        <transition-group name="taglist-moving-animation">
          <Tag
              type="dot"
              ref="tagsPageOpened"
              v-for="(item,index) in state.tagsNavList"
              :key="`tag-nav-${index}`"
              :name="item.name"
              :closable="item.name !== 'home'"
              :color="isCurrentTag(item)?'primary':'default'"
              @on-close="closeCurrentTags"
          >
            <router-link :to="item.path" style="color: #515a6e;">
              {{ item.title }}
            </router-link>
          </Tag>
        </transition-group>
      </div>
    </div>
  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, reactive} from "vue";
import router from "@/router";
import {commonStore} from "@/store/store";

const {proxy} = getCurrentInstance();

const state = reactive({
  // 模拟tags-nav数据
  tagsNavList: [],
  tagBodyLeft: 0,
  rightOffset: 40,
  outerPadding: 4,
  contextMenuLeft: 0,
  contextMenuTop: 0,
})

onMounted(() => {
  console.log(commonStore().tagsNavList)
  state.tagsNavList = commonStore().tagsNavList
})

// 处理tag左右移动函数
const handleScroll = (offset) => {
  const outerWidth = proxy.$refs.scrollOuter.offsetWidth;
  const bodyWidth = proxy.$refs.scrollBody.offsetWidth;
  if (offset > 0) {
    state.tagBodyLeft = Math.min(0, state.tagBodyLeft + offset);
  } else {
    if (outerWidth < bodyWidth) {
      if (state.tagBodyLeft < -(bodyWidth - outerWidth)) {
        state.tagBodyLeft = state.tagBodyLeft;
      } else {
        state.tagBodyLeft = Math.max(state.tagBodyLeft + offset, outerWidth - bodyWidth);
      }
    } else {
      state.tagBodyLeft = 0;
    }
  }
}

// 鼠标滚动切换tags
const handlescroll = (e) => {
  var type = e.type
  let delta = 0
  if (type === 'DOMMouseScroll' || type === 'mousewheel') {
    delta = (e.wheelDelta) ? e.wheelDelta : -(e.detail || 0) * 40
  }
  handleScroll(delta)
}

// 判断当前tag是否为当前路由
const isCurrentTag = (item) => {
  return item.path === router.currentRoute.value.path;
}

// 处理关闭tags事件
const handleCloseTags = (name) => {
  switch (name) {
    case 'close-left':
      closeLeftTags();
      break;
    case 'close-right':
      closeRightTags();
      break;
    case 'close-others':
      closeOtherTags();
      break;
    case 'close-all':
      closeAll();
      break;
    default:
      break;
  }
}

// 关闭当前标签左侧首页除外的tags
const closeLeftTags = () => {
  var i = state.tagsNavList.findIndex((e) => {
    return e.path === router.currentRoute.value.path
  })
  state.tagsNavList.splice(1, i - 1);
}

// 关闭当前标签右侧的tags
const closeRightTags = () => {
  var i = state.tagsNavList.findIndex((e) => {
    return e.path === router.currentRoute.value.path
  })
  state.tagsNavList.splice(i + 1,);
}

// 关闭除当前标签和首页的其他所有标签
const closeOtherTags = () => {
  state.tagsNavList = state.tagsNavList.filter(e => {
    return e.path === '/dashboard' || e.path === router.currentRoute.value.path
  })
}

// 关闭所有标签页保留首页
const closeAll = () => {
  state.tagsNavList.splice(1,);
  router.push('/dashboard')
}

// 关闭当前tags，若右侧有，则默认调至右侧，否则左侧
const closeCurrentTags = (event, name) => {
  console.log(event, name)
  var i = state.tagsNavList.findIndex(e => e.name === name)
  if (i < state.tagsNavList.length - 1) {
    router.push(`${state.tagsNavList[i + 1].path}`)
  } else {
    router.push(`${state.tagsNavList[i - 1].path}`)
  }
  state.tagsNavList.splice(i, 1);
}
</script>

<style scoped lang="less">
@import "./tags-nav.less";
</style>
